<template>
	<view class="uploadMerchantInfo">
		<u-navbar
			title="商户信息" 
			left-text="" 
			@leftClick="onClickBack"
			:placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true"
		></u-navbar>
		<view class="content">
			<view class="w-flex w-flex-between">
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead($event,1)"
					@delete="deletePic($event,1)"
					name="1"
					multiple
					:maxCount="1"
					width="160"
					height="120">
					<image src="../../static/icon/management_e.jpg" 
					mode="widthFix" style="width: 160px;min-height: 120px;max-height: 120px;"></image>
				</u-upload>
				<u-upload
					:fileList="fileList2"
					@afterRead="afterRead($event,2)"
					@delete="deletePic($event,2)"
					name="2"
					multiple
					:maxCount="1"
					width="160"
					height="120">
					<image src="../../static/icon/Doorhead_e.jpg" 
					mode="widthFix" style="width: 160px;min-height: 120px;max-height: 120px;"></image>
				</u-upload>
			</view>
			<view class="w-flex w-flex-between">
				<text class="w-txt-999 w-m-10" style="display: flex;width: 160px;justify-content: center;">经营场所内设照片</text>
				<text class="w-txt-999 w-m-10" style="display: flex;width: 160px;justify-content: center;">门头照</text>
			</view>
			<view class="w-flex">
				<u-upload
					:fileList="fileList3"
					@afterRead="afterRead($event,3)"
					@delete="deletePic($event,3)"
					name="3"
					multiple
					:maxCount="1"
					width="160"
					height="120">
					<image src="../../static/icon/Cashier_e.jpg" 
					mode="widthFix" style="width: 160px;min-height: 120px;max-height: 120px;"></image>
					
				</u-upload>
			</view>
			<view class="w-flex">
				<text class="w-txt-999 w-m-10" style="display: flex;width: 160px;justify-content: center;">收银台照片</text>
			</view>
			<view>
				<u-picker :show="IndustryType.show" @cancel="close" @close="close"
					:closeOnClickOverlay="true" @confirm="confirmIndustryType"
					:columns="IndustryType.list" keyName="name">
					
				</u-picker>
				<u--form
					labelPosition="left"
					:model="addressInfo"
					ref="form1" >
				
					<u-form-item
						label="店铺所在省名"
						prop="provinceName"
						borderBottom
						labelWidth="110"
						clearable
						ref="item1">
						<view class=" w-flex" @click="showIndustryType(1)" style="flex: 1;justify-content: space-between;">
							<view class="w-flex">
								<view v-if="addressInfo.provinceName">{{addressInfo.provinceName}}</view>
								<view v-else class="w-font-12" style="color: #c0c4cc;">请选择所在省名</view>
							</view>
							<view><u-icon name="arrow-right" size="14" color="#d9d9d9"></u-icon></view>
						</view>
					</u-form-item>
					<u-form-item
						label="店铺所在市名"
						prop="cityName"
						borderBottom
						labelWidth="110"
						clearable
						v-if="addressInfo.provinceName"
						ref="item1">
						<view class=" w-flex" @click="showIndustryType(2)" style="flex: 1;justify-content: space-between;">
							<view class="w-flex">
								<view v-if="addressInfo.cityName">{{addressInfo.cityName}}</view>
								<view v-else class="w-font-12" style="color: #c0c4cc;">请选择所在市</view>
							</view>
							<view><u-icon name="arrow-right" size="14" color="#d9d9d9"></u-icon></view>
						</view>
					</u-form-item>
					<u-form-item
						label="店铺所在区名"
						prop="areaName"
						borderBottom
						labelWidth="110"
						clearable
						v-if="addressInfo.cityName"
						ref="item1">
						<view class=" w-flex" @click="showIndustryType(3)" style="flex: 1;justify-content: space-between;">
							<view class="w-flex">
								<view v-if="addressInfo.areaName">{{addressInfo.areaName}}</view>
								<view v-else class="w-font-12" style="color: #c0c4cc;">请选择所在区名</view>
							</view>
							<view><u-icon name="arrow-right" size="14" color="#d9d9d9"></u-icon></view>
						</view>
					</u-form-item>
					<u-form-item
						label="详细地址"
						prop="address"
						borderBottom
						labelWidth="110"
						clearable
						ref="item1">
						<view class=" w-flex" style="flex: 1;justify-content: space-between;">
							<u--input
								placeholder="请输入详细地址"
								border="none"
								v-model="addressInfo.address"
								clearable
							></u--input>
						</view>
					</u-form-item>
				</u--form>

			</view>
		</view>
		
		<view class="btnBox">
			<u-button text="保存" color="#fff" class="preservationBtn" @click="preservationChange"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			fileList1: [],
			fileList2: [],
			fileList3: [],
			addressInfo: {
				provinceName: '',
				provinceCode: null,
				cityName: '',
				cityCode: null,
				areaName: '',
				areaCode: null,
				address: '',
				merchantShortName: '',
				merchantName: '',
				
			},

			IndustryType: {
				show: false,
				list: []
			},
			parameterType: 1,
			shopInfo: {
				insidePic: '',
				doorPic: '',
				cashierDeskPic: '',
			},
			userId: ''
		}
	},
	onLoad(e) {
		this.userId = e.id
		if (uni.getStorageSync("addressInfo")) {
			this.addressInfo.provinceName = uni.getStorageSync("addressInfo").provinceName
			this.addressInfo.provinceCode = uni.getStorageSync("addressInfo").provinceCode
			this.addressInfo.cityName = uni.getStorageSync("addressInfo").cityName
			this.addressInfo.cityCode = uni.getStorageSync("addressInfo").cityCode
			this.addressInfo.areaName = uni.getStorageSync("addressInfo").areaName
			this.addressInfo.areaCode = uni.getStorageSync("addressInfo").areaCode
			this.addressInfo.address = uni.getStorageSync("addressInfo").address
			this.getAddressInfo()
		}
		if (uni.getStorageSync("shopInfo")) {
			this.shopInfo.insidePic = uni.getStorageSync("shopInfo").insidePic
			this.shopInfo.doorPic = uni.getStorageSync("shopInfo").doorPic
			this.shopInfo.cashierDeskPic = uni.getStorageSync("shopInfo").cashierDeskPic
			this.fileList1 = [{url: uni.getStorageSync("shopInfo").insidePic}]
			this.fileList2 = [{url: uni.getStorageSync("shopInfo").doorPic}]
			this.fileList3 = [{url: uni.getStorageSync("shopInfo").cashierDeskPic}]
		}
	},
	methods: {
		onClickBack () {
			uni.navigateBack()
		},
		
		async getAddressInfo () {
			let params = {
				  'param[areaCode]': this.addressInfo.provinceCode,
			}
			const res = await this.$API({url: '/api/user/leshua_area', method:"GET", data: params,})
			this.addressInfo.provinceName = res.data.data[0].areaName
			this.get_leshua_area2()
		},
		async get_leshua_area2 () {
			let params = {
				  'param[areaCode]': this.addressInfo.cityCode,
			}
			const res = await this.$API({url: '/api/user/leshua_area', method:"GET", data: params,})
			this.addressInfo.cityName = res.data.data[0].areaName
			this.get_leshua_area3()
		},
		async get_leshua_area3 () {
			let params = {
				  'param[areaCode]': this.addressInfo.areaCode,
			}
			const res = await this.$API({url: '/api/user/leshua_area', method:"GET", data: params,})
			this.addressInfo.areaName = res.data.data[0].areaName
		},
		deletePic(event, type) {
			this[`fileList${event.name}`].splice(event.index, 1)
			if (type === 1) {
				this.shopInfo.insidePic = ''
			}
			if (type === 2) {
				this.shopInfo.doorPic = ''
			}
			if (type === 1) {
				this.shopInfo.cashierDeskPic = ''
			}
		},
		async afterRead(event, type) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].thumb, type)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		
		async uploadFilePromise(url, type) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://ynf.xxhf.cn/index.php/api/user/upload_to_les', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						file:this.fileList1[0]
					},
					success: (res) => {
						if (type === 1) {
							this.shopInfo.insidePic = JSON.parse(res.data).data.fullurl
						} else if (type === 2) {
							this.shopInfo.doorPic = JSON.parse(res.data).data.fullurl
						} else if (type === 3) {
							this.shopInfo.cashierDeskPic = JSON.parse(res.data).data.fullurl
						}
						
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		showIndustryType (type) {
			this.parameterType = type
			this.IndustryType.show = true
			this.getdialogDatalist()
		},
		close () {
			this.IndustryType.show = false
		},
		async getdialogDatalist () {
			this.IndustryType.list = [
				[]
			]
			if(this.parameterType === 1) {
				let params = {}
				const res = await this.$API({url: '/api/user/les_area1', method:"GET", data: params})
				
				for (let item of res.data) {
					this.IndustryType.list[0].push(item)
				}
			}
			if(this.parameterType === 2) {
				let params = {
					code: this.addressInfo.provinceCode,
				}
				const res = await this.$API({url: '/api/user/les_area2', method:"GET", data: params})
				
				for (let item of res.data) {
					this.IndustryType.list[0].push(item)
				}
			}
			if(this.parameterType === 3) {
				let params = {
					code: this.addressInfo.cityCode,
				}
				const res = await this.$API({url: '/api/user/les_area3', method:"GET", data: params})
				for (let item of res.data) {
					this.IndustryType.list[0].push(item)
				}
			}

		},
		confirmIndustryType (e) {
			console.log(e)
			if(this.parameterType === 1) {
				this.addressInfo.provinceName = e.value[0].name
				this.addressInfo.provinceCode = e.value[0].value
			}
			if(this.parameterType === 2) {
				if (e.value[0]) {
					this.addressInfo.cityName = e.value[0].name
					this.addressInfo.cityCode = e.value[0].value
				} else {
					this.addressInfo.cityName = e.values[0][0].name
					this.addressInfo.cityCode = e.values[0][0].value
				}
				
			}
			if(this.parameterType === 3) {
				this.addressInfo.areaName = e.value[0].name
				this.addressInfo.areaCode = e.value[0].value
			}
			this.IndustryType.show = false
		},
		preservationChange () {
			if(this.shopInfo.insidePic === '') {
				uni.showToast({
					icon: 'none',
					title: '请上传经营场所内设照片'
				})
				return
			}
			if(this.shopInfo.doorPic === '') {
				uni.showToast({
					icon: 'none',
					title: '请上传门头照'
				})
				return
			}
			if(this.shopInfo.cashierDeskPic === '') {
				uni.showToast({
					icon: 'none',
					title: '请上传收银台照片'
				})
				return
			}
			if(this.addressInfo.provinceName === '') {
				uni.showToast({
					icon: 'none',
					title: '请选择省份'
				})
				return
			}
			if(this.addressInfo.cityName === '') {
				uni.showToast({
					icon: 'none',
					title: '请选择市名'
				})
				return
			}
			if(this.addressInfo.areaName === '') {
				uni.showToast({
					icon: 'none',
					title: '请选择区名'
				})
				return
			}
			let addressInfo = {
				provinceName: this.addressInfo.provinceName,
				provinceCode: this.addressInfo.provinceCode,
				cityName: this.addressInfo.cityName,
				cityCode: this.addressInfo.cityCode,
				areaName: this.addressInfo.areaName,
				areaCode: this.addressInfo.areaCode,
				address: this.addressInfo.address,
			}
			let shopInfo = {
				insidePic: this.shopInfo.insidePic,
				doorPic: this.shopInfo.doorPic,
				cashierDeskPic: this.shopInfo.cashierDeskPic,
			}

			uni.setStorageSync("addressInfo", addressInfo)
			uni.setStorageSync("shopInfo", shopInfo)
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.uploadMerchantInfo {
	.content {
		padding: 0 20rpx;
		padding-top: 20rpx;
		background: #FFFFFF;
		.labelWidth {
			width: 200rpx;
		}
		.startTime {
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b3b3b3;
			padding: 0 20rpx;
			width: 240rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.btnBox {
		margin-top: 40rpx;
		padding: 20rpx;
		.preservationBtn {
			background-color: #1678ff !important;
		}
	}
}
</style>
